@import '../../styles/variables';
@import '../../styles/mixins';
@import '~office-ui-fabric-react/src/common/common';

// TopNav variables
$TopNav-height: 52px;
$TopNav-backgroundColor: $ms-color-white;
$TopNav-height-full-uhf: $TopNav-height * 2;

// Local variables--REMOVE later
// Padding matches padding used by UHF at the same (lg / sm) UHF breakpoints
$App-padding-md: 40px;

$App-padding-left-lg: 5%;
$App-padding-right-lg: 5%;
$App-padding-left-sm: 6px;
$App-padding-right-sm: 6px;

$linkPadding: 16px;

.topNavWrapper {
  background: $TopNav-backgroundColor;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 100;
  max-width: 100vw;
  overflow: hidden;
}

.topNav {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: $TopNav-height;
  margin: 0 auto;
  max-width: $App-maximumWidth;
  padding: 0 $contentPadding-sm 0 $contentPadding-sm;
}

.homeLinkSection,
.linkListSection {
  display: flex;
  align-items: center;
}

.links,
.link {
  height: $TopNav-height;

  &.isStacked {
    height: initial;
  }
}

.links {
  display: flex;
  flex-direction: row;
  margin: 0;

  &.isStacked {
    flex-direction: column;
  }
}

.link {
  display: inline-flex;
  font-size: $ms-font-size-m;
  line-height: 1.5;
  align-items: center;

  a {
    color: $ms-color-neutralPrimary;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    height: $TopNav-height;
    padding: 0 $linkPadding;

    @include focus-border(2px);

    &:hover .linkTitle {
      border-bottom: 2px solid black;
    }
  }

  &:not(.isActive):hover a {
    border-color: $ms-color-neutralSecondary;
  }

  &.isActive a {
    border-color: $ms-color-neutralDark;
  }

  &.isStacked {
    a {
      width: 100%;
      border-bottom: 1px solid $ms-color-neutralLight;

      &:hover {
        border-color: $ms-color-neutralLight;
        background-color: $ms-color-neutralLighterAlt;
      }

      .linkTitle {
        border: 0;
      }
    }

    &:first-child a {
      border-top: 1px solid $ms-color-neutralLight;
    }
  }
}

.linkTitle {
  border-bottom: 2px solid transparent;
  position: relative;
  bottom: -2px;
}

.isHomePage {
  display: flex;
  align-items: center;
  flex-direction: row;

  a {
    font-size: $ms-font-size-l;
    font-weight: $ms-font-weight-semibold;
    color: $ms-color-neutralDark;
    display: flex;
    align-items: center;
    height: $TopNav-height;
  }
}

.isFabricLink {
  @include margin-left(16px);
  padding: 0 $linkPadding;
  @include focus-border(2px);

  &:before {
    content: '|';
    font-size: 24px;
    position: relative;
    @include left(-16px);
    font-weight: normal;
  }
}

.microsoftLogo {
  width: 114px;
  padding: 6px;
  margin: auto;
  @include focus-border(2px);

  img {
    width: 100%;
  }
}

@media only screen and (min-width: $uhf-screen-min-mobile) {
  .topNav {
    @include ms-padding-left(30px);
  }
}

@media only screen and (min-width: $uhf-screen-max-lg) {
  .topNav {
    @include ms-padding-left(5%);
    @include ms-margin-left(8px);
  }
}
